<template>
    <div>
        <page-main>
            <div style="display: flex; flex-wrap: wrap;">
                <div style="
                        padding: 4px 4px;
                        background-color: #8fbcd9;
                        color: #fff;
                        height: 29px;
                        width: 115px;
">
                    统计信息->
                </div>
                <div class="sanjiaoxing"></div>
                <div class="infoBox point-total" @click="showPatrolPointDialog(tongjiInfo.point_numbers)">
                    巡查点: {{ tongjiInfo.point_numbers }}
                </div>
                <div class="infoBox unqualified" @click="showPatrolPointDialog(tongjiInfo.danger_point_total, 'danger')">
                    不合格点: {{ tongjiInfo.danger_point_total }}
                </div>
                <div class="infoBox overdue" @click="showPatrolPointDialog(tongjiInfo.task_point_not_numbers, 'out')">
                    超期巡查点: {{ tongjiInfo.task_point_not_numbers }}
                </div>
                <div class="infoBox" @click="showPatrolPointDialog(tongjiInfo.point_not_used_numbers, 'not_used')">
                    未启用点: {{ tongjiInfo.point_not_used_numbers }}
                </div>
                <!-- <div class="infoBox">巡查员: {{ tongjiInfo }}</div> -->
            </div>
        </page-main>
        <page-main>
            <div style="margin-top: 10px; display: flex; align-items: center;">
                <span style="width: 100px;">巡查点类型</span>
                <el-select v-model="name" placeholder="请选择" clearable>
                    <el-option label="配电柜" value="配电柜" />
                    <el-option label="排烟阀（口）" value="排烟阀（口）" />
                    <el-option label="其他" value="其他" />
                    <el-option label="外租商店" value="外租商店" />
                    <el-option label="地下停车场" value="地下停车场" />
                    <el-option label="消防控制室" value="消防控制室" />
                    <el-option label="疏散楼梯、楼梯间、疏散走道、安全出口" value="疏散楼梯、楼梯间、疏散走道、安全出口" />
                    <el-option label="消防车道" value="消防车道" />
                    <el-option label="灭火器" value="灭火器" />
                    <el-option label="消防电梯" value="消防电梯" />
                    <el-option label="防火卷帘" value="防火卷帘" />
                    <el-option label="防火门" value="防火门" />
                    <el-option label="消防专用电话" value="消防专用电话" />
                    <el-option label="疏散指示标志" value="疏散指示标志" />
                    <el-option label="消防应急照明" value="消防应急照明" />
                    <el-option label="送风阀（口）" value="送风阀（口）" />
                    <el-option label="风机控制柜" value="风机控制柜" />
                    <el-option label="末端试水装置" value="末端试水装置" />
                    <el-option label="喷头" value="喷头" />
                    <el-option label="报警阀组" value="报警阀组" />
                    <el-option label="室内消火栓和消火栓箱" value="室内消火栓和消火栓箱" />
                    <el-option label="室外消火栓" value="室外消火栓" />
                    <el-option label="水泵接合器" value="水泵接合器" />
                    <el-option label="消防水泵房" value="消防水泵房" />
                    <el-option label="高位水箱间" value="高位水箱间" />
                    <el-option label="消防水池" value="消防水池" />

                </el-select>
                <el-button style="margin-left: 15px;" type="primary" @click="searchBtn">搜索</el-button>
                <el-button type="warning" @click="refreshBtn">重置</el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%; margin-top: 15px;" v-loading="tableDataLoading">
                <!-- <el-table-column prop="id" label="ID" width="150"></el-table-column> -->
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column prop="name" label="巡查点类型"></el-table-column>
                <el-table-column prop="all_point_numbers" label="巡查点数">
                    <template #default="scope">
                        <span class="patrolPointNum total-num"
                            @click="showPatrolPointDialog(scope.row.all_point_numbers, '', scope.row.id)">{{
                                scope.row.all_point_numbers }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="danger_point_total" label="不合格点数">
                    <template #default="scope">
                        <span class="patrolPointNum unqualified-num"
                            @click="showPatrolPointDialog(scope.row.danger_point_total, 'danger', scope.row.id)">{{
                                scope.row.danger_point_total }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="task_point_not_numbers" label="超期巡查点数">
                    <template #default="scope">
                        <span class="patrolPointNum overdue-num"
                            @click="showPatrolPointDialog(scope.row.task_point_not_numbers, 'out', scope.row.id)">{{
                                scope.row.task_point_not_numbers }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </page-main>
        <el-dialog v-model="patrolPointdialogVisible" width="60%">
            <patrolPoint v-if="patrolPointdialogVisible" :patrolPointType="patrolPointType"
                :patrolPointTypeId="patrolPointTypeId"></patrolPoint>
        </el-dialog>
    </div>
</template>

<script>
import patrolPoint from '@/views/unitPerformanceDataStatistics/components/patrolPoint.vue'
export default {
    components: {
        patrolPoint
    },
    data() {
        return {
            tableData: [],
            tableDataLoading: false,
            tongjiInfo: [],
            name: '',
            patrolPointdialogVisible: false,
            patrolPointType: '',
            patrolPointTypeId: ''
        }
    },
    created() {
        this.getInfoData()
        this.getTable()
    },
    methods: {
        showPatrolPointDialog(num, type, id) {
            this.patrolPointType = type
            this.patrolPointTypeId = id
            if (num) {
                this.patrolPointdialogVisible = true
            }
        },
        // 搜索
        searchBtn() {
            this.getTable()
        },
        // 重置按钮
        refreshBtn() {
            this.name = ''
            this.getTable()
        },
        // 头部数据
        getInfoData() {
            this.$api.post('/unit/UnitDuty/total', { name: this.name }).then((res) => {
                this.tongjiInfo = res.data
            })
        },
        // 表格数据
        getTable() {
            this.tableDataLoading = true
            this.$api
                .post('/unit/UnitDuty/pointType', { name: this.name })
                .then((res) => {
                    this.tableData = res.data
                })
                .finally(() => {
                    this.tableDataLoading = false
                })
        }
    }
}
</script>

<style scoped lang="scss">
.total-num {
    cursor: pointer;
    color: blue;
}

.unqualified-num {
    cursor: pointer;
    color: #f00;
}

.overdue-num {
    cursor: pointer;
    color: #ffa500;
}

.block {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.sanjiaoxing {
    border-style: solid;
    border-width: 14px 14px 14px 10px;
    border-color: transparent transparent transparent #8fbcd9;
    width: 0;
    height: 0;
}

.infoBox {
    border: 1px solid #ccc;
    padding: 4px 10px;
    margin-right: 20px;
    cursor: pointer;

    &.point-total {
        @extend .total-num;
    }

    &.unqualified {
        @extend .unqualified-num;
    }

    &.overdue {
        @extend .overdue-num;
    }
}
</style>
